<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <!-- <link rel="stylesheet" href="stylesheets/reset.css"> -->
  <link rel="stylesheet" href="stylesheets/index.css">
  <style>
	.red {
		color: red
	}
	.blue {
		color: blue
	}
  </style>
</head>
<body>

<!-- 
`${ 1 + 2 }`
diff 算法
 
 指令
 v-once
 v-html
 v-bind:attr=""   ===  :attr=""
 v-on:event=""    ===  @even=""
 v-if
 v-for
 v-*
 
 {{ }} ele.innerText | ele.textContext
 v-html ele.innnerHTML
 -->

<div id="app">
	<!-- <h1 v-bind:[class1]="cname">{{ msg.split("").reverse().join("") }}</h1> -->
	<h1 :[class1]="cname">{{ msg.split("").reverse().join("") }}</h1>
	<hr>
	<h1 v-once>{{ msg.repeat(3) }}</h1>
	<hr>
	<div>{{ rawHtml }}</div>
	<div v-html="rawHtml"></div>
	{{ (1 + 1).toFixed(10) }}
	<button v-on:click="msg = msg.split('').reverse().join('')" v-bind:disabled="!isButtonDisabled">button</button>
	<button @click="msg = msg.split('').reverse().join('')" v-bind:disabled="!isButtonDisabled">button</button>
</div>


<script src="./vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
